{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container-fluid py-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">场景配置</h4>
    <a href="/scenes" class="btn btn-outline-primary btn-sm">新建场景</a>
  </div>

  {% if saved %}
    <div class="alert alert-success py-2">已保存成功。</div>
  {% endif %}
  {% if error_msg %}
    <div class="alert alert-danger py-2">{{ error_msg }}</div>
  {% endif %}

  <div class="row g-3">
    <div class="col-12 col-lg-4">
      <div class="card">
        <div class="card-header py-2">{{ editing|yesno:"编辑场景,新建场景" }}</div>
        <div class="card-body">
          <form method="post" action="/scenes/">
            {% csrf_token %}
            {% if editing and editing_scene %}
              <input type="hidden" name="scene_id" value="{{ editing_scene.id }}" />
            {% endif %}
            <div class="mb-2">
              <label class="form-label">名称</label>
              {{ form.name }}
            </div>
            <div class="mb-2">
              <label class="form-label">描述</label>
              {{ form.description }}
            </div>
            <div class="mb-2">
              <label class="form-label">邮件类型</label>
              {{ form.email_type }}
            </div>
            <div class="mb-2">
              <label class="form-label">抽取字段</label>
              {{ form.fields_to_extract }}
            </div>
            <div class="mb-2">
              <label class="form-label">提示词模板</label>
              {{ form.prompt_template }}
            </div>
            <div class="row">
              <div class="col-6 mb-2">
                <label class="form-label">AI提供方</label>
                {{ form.ai_provider }}
              </div>
              <div class="col-6 mb-2">
                <label class="form-label">优先级</label>
                {{ form.priority }}
              </div>
            </div>
            <div class="row">
              <div class="col-6 mb-2 form-check">
                <label class="form-check-label">启用</label>
                {{ form.enabled }}
              </div>
              <div class="col-6 mb-2">
                <label class="form-label">更新策略</label>
                {{ form.update_policy }}
              </div>
            </div>
            <div class="mb-2">
              <label class="form-label">替代匹配优先级</label>
              {{ form.alt_match_priority }}
            </div>
            <div class="mb-2">
              <label class="form-label">更新前必需字段</label>
              {{ form.required_fields_for_update }}
            </div>
            <div class="mb-2">
              <label class="form-label">允许无PO创建</label>
              {{ form.allow_create_without_po }}
            </div>
            <div class="mb-3">
              <label class="form-label">可更新字段白名单</label>
              {{ form.update_fields_whitelist }}
            </div>
            <div class="d-flex gap-2">
              <button type="submit" class="btn btn-primary">保存</button>
              <a href="/scenes/" class="btn btn-light">重置</a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-8">
      <div class="card">
        <div class="card-header py-2">场景列表</div>
        <div class="card-body">
          <form method="get" class="row g-2 align-items-end mb-3">
            <div class="col-12 col-md-4">
              <label class="form-label">名称包含</label>
              <input type="text" class="form-control" name="kw" value="{{ kw }}" placeholder="按名称搜索" />
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">AI提供方</label>
              <select name="provider" class="form-select">
                <option value="">全部</option>
                {% for p in providers %}
                  <option value="{{ p.id }}" {% if provider_selected == p.id|stringformat:'s' %}selected{% endif %}>{{ p.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-6 col-md-2">
              <label class="form-label">启用状态</label>
              <select name="enabled" class="form-select">
                <option value="">全部</option>
                <option value="1" {% if enabled_selected == '1' %}selected{% endif %}>启用</option>
                <option value="0" {% if enabled_selected == '0' %}selected{% endif %}>禁用</option>
              </select>
            </div>
            <div class="col-6 col-md-2">
              <label class="form-label">每页</label>
              <select name="page_size" class="form-select">
                <option value="10" {% if page_size == 10 %}selected{% endif %}>10</option>
                <option value="20" {% if page_size == 20 %}selected{% endif %}>20</option>
                <option value="30" {% if page_size == 30 %}selected{% endif %}>30</option>
                <option value="50" {% if page_size == 50 %}selected{% endif %}>50</option>
                <option value="100" {% if page_size == 100 %}selected{% endif %}>100</option>
              </select>
            </div>
            <div class="col-6 col-md-1 d-grid">
              <button type="submit" class="btn btn-outline-secondary">筛选</button>
            </div>
          </form>

          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <thead>
                <tr>
                  <th style="width: 60px;">ID</th>
                  <th>名称</th>
                  <th>AI提供方</th>
                  <th style="width: 80px;">优先级</th>
                  <th style="width: 80px;">启用</th>
                  <th class="text-end" style="width: 220px;">操作</th>
                </tr>
              </thead>
              <tbody>
                {% for s in scenes %}
                  <tr>
                    <td>{{ s.id }}</td>
                    <td>{{ s.name }}</td>
                    <td>{{ s.ai_provider.name }}</td>
                    <td>{{ s.priority }}</td>
                    <td>
                      {% if s.enabled %}
                        <span class="badge bg-success">启用</span>
                      {% else %}
                        <span class="badge bg-secondary">禁用</span>
                      {% endif %}
                    </td>
                    <td class="text-end">
                      <a href="/scenes?scene_id={{ s.id }}" class="btn btn-link btn-sm">编辑</a>
                      <form method="post" action="/scenes/" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="scene_id" value="{{ s.id }}" />
                        <input type="hidden" name="op" value="toggle" />
                        <button type="submit" class="btn btn-outline-secondary btn-sm">{{ s.enabled|yesno:"禁用,启用" }}</button>
                      </form>
                      <form method="post" action="/scenes/" class="d-inline" onsubmit="return confirm('确认删除该场景？该操作不可撤销');">
                        {% csrf_token %}
                        <input type="hidden" name="scene_id" value="{{ s.id }}" />
                        <input type="hidden" name="op" value="delete" />
                        <button type="submit" class="btn btn-outline-danger btn-sm">删除</button>
                      </form>
                    </td>
                  </tr>
                {% empty %}
                  <tr><td colspan="6" class="text-center text-muted">暂无数据</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>

          {% if page_obj.paginator.num_pages > 1 %}
            <nav>
              <ul class="pagination pagination-sm mb-0">
                {% if page_obj.has_previous %}
                  <li class="page-item">
                    <a class="page-link" href="?kw={{ kw|urlencode }}&provider={{ provider_selected }}&enabled={{ enabled_selected }}&page_size={{ page_size }}&page={{ page_obj.previous_page_number }}">上一页</a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">上一页</span></li>
                {% endif %}
                <li class="page-item disabled"><span class="page-link">第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页</span></li>
                {% if page_obj.has_next %}
                  <li class="page-item">
                    <a class="page-link" href="?kw={{ kw|urlencode }}&provider={{ provider_selected }}&enabled={{ enabled_selected }}&page_size={{ page_size }}&page={{ page_obj.next_page_number }}">下一页</a>
                  </li>
                {% else %}
                  <li class="page-item disabled"><span class="page-link">下一页</span></li>
                {% endif %}
              </ul>
            </nav>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}